import utils from "../../utils";

const _tableTemplate = (props: TC.Iprops, slots: any) => {

  // page_size 改变
  const handleSizeChange = (val: number) => {
    props.params.page_size = val;
    props.initData(props.params)
  }

  // page 改变
  const handleCurrentChange = (val: number) => {
    props.params.page = val;
    props.initData(props.params)
  }


  // 表格插槽
  const tableSlots = {
    header: ({ $index }: { $index: number }) => {
      const _Icon = props.columns[$index - 1].icon
      return _Icon ? <div class='t-label'> <i> <_Icon />  </i> {props.columns[$index - 1].label}</div> : <div class='t-label'>  {props.columns[$index - 1].label}</div>
    },
  }

  //  el-table-column 配置项
  const _tableItemProps = <T extends TC.ITableItem>(res: T) => ({
    label: res.label,
    showOverflowTooltip: res.showTip || false,
    width: res.width || 0,
    prop: res.key,
    align: 'center',
    formatter: (row: T, column: any, cellValue: any) => {
      if (!res.type) {
        return cellValue
      }
      if (res.type === 'enum') {
        return res.data[cellValue + '']
      }
      if (res.type === 'date' || res.type === 'datetime') {
        return utils.formatTime(cellValue, res.type === 'date')
      }
    },
  })

  return () => (
    <div class="table">
      <div class="t-search">
        <div class="searchinfo">
          <div class='s-left'> <el-space size='small' wrap> {slots.searchinfoLeft && slots.searchinfoLeft()} </el-space></div>
          <div class='s-right'> {slots.searchinfoRight ? slots.searchinfoRight() : ''}</div>
        </div>
      </div>
      <div class='t-body'>
        <el-table
          minHeight={1000}
          data={props.tableData}
          class='table-main'
          v-loading={props.loading}
          element-loading-text="Loading..."
        >
          <el-table-column type='index' align='center' label='序号' width='80' v-slots={{ header: () => <div class='t-label'> 序号 </div> }} ></el-table-column>
          {
            props.columns.map((res: TC.ITableItem) => <el-table-column {..._tableItemProps(res)} v-slots={{ default: res.slots, ...tableSlots }} />)
          }
        </el-table>
      </div>
      <div class='pagination' v-show={props.pageShow}>
        <el-pagination layout="slot" total={props.count}>
          <span class="leftPagination">共 {props.count} 条 </span>
        </el-pagination>

        <el-pagination
          background
          currentPage={props.params.page}
          page-sizes={[10, 20, 30, 40]}
          page-size={props.params.page_size}
          layout="sizes, prev, pager, next, jumper"
          total={props.count}
          onUpdate:pageSize={handleSizeChange}
          onUpdate:currentPage={handleCurrentChange}
        />
      </div>
    </div>
  );
}

export {
  _tableTemplate
}